/* ------------------------------------------------------------------------------
*
*  # Responsive extension
*
*  Optimise the table's layout for different screen sizes through the dynamic 
*  insertion and removal of columns from the table
*
*  Version: 1.0
*  Latest update: May 25, 2015
*
* ---------------------------------------------------------------------------- */

// Layouts
// ------------------------------

// Inline details row
.dtr-inline {
  &.collapsed tbody {
    tr {
      td,
      th {
        &:before {
          margin-right: 10px;
        }

        &:first-child {
          position: relative;
          cursor: pointer;
          white-space: nowrap;

          &.dataTables_empty:before {
            display: none;
          }
        }
      }
    }
  }
}

// Column details row
.dtr-column {
  tbody {
    td,
    th {
      &.control {
        position: relative;
        cursor: pointer;
      }
    }
  }
}

// Expand/collapse icons
// ------------------------------

.dtr-inline.collapsed tbody tr td:first-child:before,
.dtr-inline.collapsed tbody tr th:first-child:before,
.dtr-column tbody tr td.control:before,
.dtr-column tbody tr th.control:before {
  content: '\e9e4';
  font-family: 'icomoon';
  display: inline-block;
  font-size: @icon-font-size;
  width: @icon-font-size;
  line-height: 1;
  position: relative;
  top: -1px;
  vertical-align: middle;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.dataTable.dtr-inline.collapsed tbody tr.parent td:first-child:before,
.dataTable.dtr-inline.collapsed tbody tr.parent th:first-child:before,
.dataTable.dtr-column tbody tr.parent td.control:before,
.dataTable.dtr-column tbody tr.parent th.control:before {
  content: '\e9e7';
}

.dtr-inline.collapsed tbody tr.child td:before {
  display: none;
}

// Child rows with details
// ------------------------------

.dataTable {
  tr {

    // Child row
    &.child {
      &:hover {
        background-color: transparent;
      }

      .dtr-title {
        display: table-cell;
        font-weight: 500;
        padding-right: 40px;
      }

      .dtr-data {
        display: table-cell;
        padding: 8px 0;
      }
    }

    // Child cell
    td.child {
      white-space: normal;
      position: relative;

      > ul {
        display: table;
        table-layout: fixed;
        width: 100%;
        list-style: none;
        margin: 0;
        padding: 0;

        > li {
          display: table-row;
        }
      }
    }
  }
}

// Responsive stuff
// ------------------------------

// Make dropdown menus full width
@media (max-width: @screen-xs) {
  .dataTable tr td.child > ul > li {
    .dropdown,
    .dropup,
    .btn-group {
      position: static;
    }

    .dropdown-menu {
      left: 0;
      right: 0;
      border-radius: 0;
      border-width: 1px 0;
    }
  }
}

